<template>
	<view class="container">
		<!-- 返回自定义组件 -->
		<navBack></navBack>
		<image v-if="songInfo.al" :src="songInfo.al.picUrl" class="backgroundImage"></image>
		<view class="songName">{{songName}}</view>
		<view class="author" v-if="songInfo.ar">{{songInfo.ar[0].name}}</view>
		<!-- 摇杆 -->
		<view class="circle"></view>
		<image :class="isPlay ? 'needle needleRotate' : 'needle'" src="/static/images/song/needle.png"></image>
		<!-- 磁盘 --> 
		<view :class="isPlay ? 'discContainer discAnimation' : 'discContainer'">
			<image class="disc" src="/static/images/song/disc.png"></image>
			<image class="musicImg" v-if="songInfo.al" :src="songInfo.al.picUrl"></image>
		</view>
		
		<!-- 进度条控制区域 -->
		<view class="progressControl">
			<text>{{currentTime}}</text>
			<!-- 总的进度条 -->
			<view class="barControl">
				<!-- 实时进度 -->
				<view class="audio-currentTime" :style="'width:'+currentWidth+'rpx'">
					<!-- 圆球 -->
					<view class="audio-circle"></view>
				</view>
			</view>
			<text>{{durationTime}}</text>
		</view>
		
		<!-- 底部 控制播放区域 -->
		<view class="musicControl">
			<text class="iconfont icon-xunhuanbofang"></text>
			<text class="iconfont icon-shangyishou" @tap="handleSwitchMusic" id="pre"></text>
			<text @click="handleMusicPlay" :class="isPlay ? 'iconfont icon-zantingtingzhi1' : 'iconfont icon-bofang'"></text>
			<text class="iconfont icon-xiayishou" @tap="handleSwitchMusic" id="next"></text>
			<text class="iconfont icon-duosefuzhu-gengduotiaojian1"></text>
		</view>
	</view>
</template>

<script>
	import navBack from '../../components/navBack/navBack'
	
	export default {
		data() {
			return {
				isPlay: false, // 表示音乐是否播放 控制这摇杆 磁盘 播放暂停按钮
				sId:'', // recommendSong传过来的对应歌曲ID
				songInfo:{},// 歌曲详情对象
				songName:'', // 歌名
				currentTime:'00:00', // 音乐实时时间
				durationTime: '00:00', // 音乐总时长
				currentWidth: 0, // 实时进度条的宽度
			}
		},
		components:{navBack},
		onLoad(options) {
			
			// options 接收路由跳转(recommendSong.vue)传过来的参数
			// options: 用于接收路由跳转的query参数
			// 原生小程序中路由传参，对参数的长度有限制，如果参数长度过长会自动截取掉
			// console.log(options.songId);
			this.sId = options.songId // 把传过来的歌曲ID存起来
			console.log(this.sId,'lalal');
			this.getSongDetail(this.sId)	// 获取歌曲详情
			// 获取App.vue全局实例
			const appData = getApp()
			this.appData = appData
			
			this.moment = require('moment') // 使用第三方库moment
			
			
			// 判断之前有没有页面在播放
			if(this.appData.globalData.isMusicPlay && this.appData.globalData.musicId === this.sId) {
				// 修改当前的页面播放状态为true
				this.isPlay = true
			}
			
			// #ifdef MP-WEIXIN
			// 背景音频 意思是后台退出来也能播放音乐 不支持H5
			this.bgam = uni.getBackgroundAudioManager() // 作用域全局，可以用this
			this.bgam.onPlay(() => {// 可以监听页面和系统的音乐播放
				this.changeMusicPlayState(true)// 改变音乐播放状态
				this.appData.globalData.musicId = this.sId
			})
			this.bgam.onPause(() => {// 可以监听页面和系统的音乐暂停
				this.changeMusicPlayState(false)
			})
			this.bgam.onStop(() => {// 可以监听页面和系统的音乐关闭 X掉
				this.changeMusicPlayState(false)
			})
			this.bgam.onPrev(() => {// 用户在系统音乐播放面板点击上一曲事件
				this.onEmit('pre')
			})
			this.bgam.onNext(() => {// 用户在系统音乐播放面板点击下一曲事件
				this.onEmit('next')
			})
			this.bgam.onEnded(() => {// 可以监听页面和系统的音乐播放结束
				// this.changeMusicPlayState(false)
				// 自动切换下一首且自动播放
				this.onEmit('next')
				console.log('音乐结束');
			})
			this.bgam.onTimeUpdate(() => { // 可以监听页面和系统的音乐实时更新
				// console.log('总时长',this.bgam.duration);
				// console.log('实时时间',this.bgam.currentTime);
				// 实时更新音乐进度条移动 450 是barControl类的宽度
				this.currentWidth = this.bgam.currentTime / this.bgam.duration * 410 
				this.currentTime = this.moment(this.bgam.currentTime * 1000).format('mm:ss') // 
			})
			// #endif
			
			// #ifdef H5
			// 普通音频
			this.ciac = uni.createInnerAudioContext()
			this.ciac.onPlay(() => {
				this.changeMusicPlayState(true) 
				this.appData.globalData.musicId = this.sId
			})
			this.ciac.onPause(() => {
				this.changeMusicPlayState(false)
			})
			this.ciac.onEnded(() => {
				// this.changeMusicPlayState(false)
				console.log('音乐结束');
				this.onEmit('next')
				
			})
			this.ciac.onTimeUpdate(() => { // 可以监听页面和系统的音乐实时更新
				this.currentWidth = this.ciac.currentTime / this.ciac.duration * 440
				this.currentTime = this.moment(this.ciac.currentTime * 1000).format('mm:ss')
			})
			// #endif
			this.musicControl(true,this.sId) // 进来自动播放
		},
		
		methods: {
			// 点击播放/暂停的回调
			handleMusicPlay() {
				this.isPlay = !this.isPlay
				this.musicControl(this.isPlay,this.sId)
			},
			// 控制音乐播放/暂停的功能
			async musicControl(isPlay,sId) {
				if(isPlay) {// 为true 播放
					// 获取音乐播放地址
					// 可以再次优化,如果用户播放过,下一次播放就不用再发请求
					let res = await this.$myRequest('/song/url',{id : sId})
					if(!res.data[0].url){ // 有些歌曲可能没有url
						uni.showToast({
							title:'VIP歌曲，无法播放',
							icon:'none'
						})
						this.isPlay = false
						setTimeout(() => { // 间隔1S 自动切换下一首
							this.onEmit('next')
						},1000)
					}
					// #ifdef MP-WEIXIN
					this.bgam.src = res.data[0].url	// 音频链接
					// 必须设置歌曲标题 才能使用
					this.bgam.title = this.songInfo.name
					// #endif
					
					// #ifdef H5
					// this.ciac.autoplay = true
					this.ciac.src = res.data[0].url  // 音频链接
					this.ciac.play()
					// console.log(this.ciac.paused);
					// return
					// #endif
				}else { // 为false 暂停
					// #ifdef MP-WEIXIN
					this.bgam.pause()
					// #endif
					
					// #ifdef H5
					this.ciac.pause()	// 暂时不知道 H5平台 音乐不能暂停原因
					console.log(this.ciac.paused);
					// #endif
				}
			},
			// 获取音乐详情
			async getSongDetail(sId){
				let res = await this.$myRequest('/song/detail',{ids : sId})
				this.songInfo = res.songs[0]
				// 将毫秒转化成 00:00 格式    moment(毫秒单位)
				let dt = this.moment(res.songs[0].dt).format('mm:ss')
				this.durationTime = dt // 总时长 
				
				// console.log( this.songInfo.name);
				this.songName = this.songInfo.name
				// 动态修改当前页面的窗口标题
				// uni.setNavigationBarTitle({
				// 	title: this.songInfo.name
				// })
			},
			// 修改播放状态的功能函数
			changeMusicPlayState(isPlay){
				this.isPlay = isPlay  // 修改音乐是否播放的状态
				// 修改全局音乐的播放状态 App.vue
				this.appData.globalData.isMusicPlay = isPlay
			},
			// 切换歌曲的回调
			handleSwitchMusic(event) {
				this.currentWidth = 0
				this.currentTime = '00:00'
				let type = event.currentTarget.id
				// 在切换歌曲时先停掉当前播放的歌曲 视情况给予用户体验
				// #ifdef MP-WEIXIN
				this.bgam.stop()
				// #endif
				// #ifdef H5
				this.ciac.stop()
				// #endif
				this.onEmit(type)
			},
			// 封装订阅和发布
			onEmit(type) {
				// 订阅方,来自recommendSong页面传过来的musicId
				uni.$on('musicId',(mId) => {
					this.currentWidth = 0
					this.currentTime = '00:00'
					console.log(mId,'songDetail');
					this.sId = mId // 切歌更新音乐Id
					console.log(this.sId,'this.sId');
					// 获取对应音乐id的详情信息
					this.getSongDetail(mId)
					// 自动播放切换到的音乐
					this.musicControl(true,mId)
					// 移除订阅 防止recommendSong多次订阅 
					uni.$off('musicId') // 也可以放到onload中 onload每次只执行一次
				})
				// 发布方,把切换歌曲状态数据传给recommendSong
				uni.$emit('switchType',type) // 兄弟组件传值
			}
		}
	}
</script>

<style lang="scss">
	page {
		height: 100%;
		// background: rgba(0, 0, 0, 0.5);
	}
	.container {
		height: 100%;
		// background: rgba(0, 0, 0, 0.5);
		display: flex;
		// flex布局 纵向
		flex-direction: column;
		// 侧轴水平居中
		align-items: center;
		.backgroundImage {
			position: absolute;
			top: 0;
			left: 0;
			z-index: -100;
			width: 100%;
			height: 100%;
			filter: blur(50px);
		}
		.songName {
			font-size: 36rpx;
			padding-top: 70rpx;
			color: #fff;
		}
		.author {
			color: #fff;
			font-size: 26rpx;
			color: #bbb;
		}
		// 底座
		.circle {
			width: 60rpx;
			height: 60rpx;
			border-radius: 50%;
			background: #fff;
			margin: 10rpx 0 ;
			z-index: 100;
		}
		// 摇杆
		.needle {
			position: relative;
			top: -40rpx;
			left: 60rpx;
			width: 192rpx;
			height: 274rpx;
			z-index: 99;
			// 设置旋转基点（中心点）x y  	transform-origin: 40rpx 0 ;
			transform-origin: 40rpx 0 ;
			// 没播放时 摇杆抬起 20度
			transform: rotate(-20deg);
			// 设置1秒过度效果
			transition: transform 1s;
		}
		.needleRotate {
			transform: rotate(0deg);
		}
		// 磁盘
		.discContainer {
			position: relative;
			top: -170rpx;
			width: 598rpx;
			height: 598rpx;
			
			.disc {
				width: 598rpx;
				height: 598rpx;
			}
			.musicImg {
				// 子绝父相  第一种在recommendSong.vue
				// 第二种方法：如何把子元素设置到父元素的中间
				position: absolute;
				top: 0;
				right: 0;
				bottom: 0;
				left: 0;
				margin: auto;
				
				width: 370rpx;
				height: 370rpx;
				border-radius: 50%;
			}
		}
		.discAnimation {
			// c3 动画属性:要动画的类名 时间 平滑过度 延迟多久执行 无限循环
			animation: disc 20s linear 1s infinite;
			// 摇杆落到磁盘再转动  延迟1s
			// animation-delay: ;
		}
		/* @keyframes: 设置动画帧
		    1) from to
		      - 使用于简单的动画，只有起始帧和结束帧
		      - 北京 - 上海  直达
		    2) 百分比
		      - 多用于复杂的动画，动画不止两帧
		      - 北京 - 上海 ---> 北京 -- 天津 --- 深圳 --- 上海
		      - 0% - 100%, 可以任意拆分*/
		@keyframes disc{
			from {transform: rotate(0deg);}
			to {transform: rotate(360deg);}
		}
		// 音乐进度条样式
		.progressControl {
			position: absolute;
			bottom: 200rpx;
			width: 640rpx;
			height: 80rpx;
			line-height: 80rpx;
			display: flex; // 水平排列
			.barControl {
				position: relative;
				width: 450rpx;
				height: 4rpx;
				background: rgba(0, 0, 0, 0.3);
				margin: auto 15rpx;
				
				.audio-currentTime {
					position: relative;
					top: 0;
					left: 0;
					// width: 0rpx;
					z-index: 1;
					height: 4rpx;
					background: $cloundMusic-color;
				
					.audio-circle {
						position: absolute;
						right: -12rpx;
						top: -4rpx;
						width: 12rpx;
						height: 12rpx;
						border-radius: 50%;
						background: #FFFFFF;
					}
				}
			}
			
		}
		// 底部样式
		.musicControl {
			position: absolute;
			bottom: 40rpx;
			left: 0;
			width: 100%;
			display: flex;
			border-top: 1rpx solid #fff;
			
			text {
				width: 20%;
				height: 120rpx;
				line-height: 120rpx;
				text-align: center;
				font-size: 50rpx;
				color: $cloundMusic-color;
			}
			.icon-bofang,.icon-zantingtingzhi1 {
				font-size: 80rpx;
			}
		}
	}
</style>
